<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="90px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="类型" prop="Type">
						<el-radio-group v-model="formData.Type" :disabled="formData.ParentId == 0">
							<el-radio label="Menu">菜单</el-radio>
							<el-radio label="Button">按钮</el-radio>"
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="Api标签">
						<el-select style="width: 100%" v-model="formData.ApiTag">
							<el-option v-for="item in apiTagData" :key="item" :label="item" :value="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="操作权限">
						<el-select multiple style="width: 100%" v-model="permissionData.Value">
							<el-option v-for="item in permissionData.Data" :key="item" :label="item" :value="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="标题" prop="Title">
						<el-input v-model="formData.Title" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item :label="formData.Type == 'Menu' ? '路由名称' : '按钮名称'" prop="Name">
						<el-input v-model="formData.Name" clearable :placeholder="formData.Type == 'Menu' ? '例:system/menu' : '例:Add'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="路由路径" prop="Path">
						<el-input v-model="formData.Path" clearable :placeholder="formData.Type == 'Menu' ? '例:/system/menu' : '与页面路由一致'"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="组件路径" prop="Component">
						<el-input
							v-model="formData.Component"
							clearable
							:placeholder="formData.Type == 'Menu' ? '例:system/menu/index' : '与页面组件一致'"
						></el-input>
					</el-form-item>
				</el-col>
				<template v-if="formData.Type == 'Menu'">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="图标" prop="Icon">
							<IconSelector placeholder="点击选择图标" v-model="formData.Icon" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="Sort">
							<el-input-number v-model="formData.Sort" controls-position="right" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="重定向地址" prop="Redirect">
							<el-input v-model="formData.Redirect" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否隐藏" prop="IsHide">
							<el-radio-group v-model="formData.IsHide">
								<el-radio :label="true">隐藏</el-radio>
								<el-radio :label="false">显示</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="页面缓存" prop="IsKeepAlive">
							<el-radio-group v-model="formData.IsKeepAlive">
								<el-radio :label="true">缓存</el-radio>
								<el-radio :label="false">不缓存</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否固定" prop="IsAffix">
							<el-radio-group v-model="formData.IsAffix">
								<el-radio :label="true">固定</el-radio>
								<el-radio :label="false">不固定</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否外链" prop="IsLink">
							<el-radio-group v-model="formData.IsLink" :disabled="formData.IsIframe">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否内嵌" prop="IsIframe">
							<el-radio-group v-model="formData.IsIframe" :disabled="formData.IsLink">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="formData.IsLink || formData.IsIframe">
						<el-form-item :label="formData.IsLink ? '外链地址' : '内嵌地址'" prop="Url">
							<el-input v-model="formData.Url" clearable></el-input>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref, ref, defineAsyncComponent, watch } from 'vue';
import { Get, Post, Put } from '/@/common/http';
import EMsg from '/@/common/eMsg';
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
const dialogShow = ref(false);

const formRef = ref();
const formRules = ref({
	Title: [{ required: true, message: '标题不可为空', trigger: 'blur' }],
	ApiTag: [{ required: true, message: 'Api标签不可为空', trigger: 'change' }],
});
const formData = ref({
	ParentId: 0,
	Id: 0,
	Title: '',
	Icon: '',
	Name: '',
	Path: '',
	Component: '',
	Redirect: '',
	Type: 'Menu',
	IsHide: false,
	IsKeepAlive: false,
	IsIframe: false,
	IsAffix: false,
	IsLink: false,
	Sort: 0,
	ApiTag: 'SysPublic',
	Permission: '',
	Url: '',
});
const permissionData: Ref<any> = ref({
	Data: [],
	Value: [],
});
const apiTagData = ref([]);
let parent = {
	Component: '',
	Path: '',
};
const onShow = (id: number, parentId: number, parentData: any | null = null) => {
	formData.value.Id = id;
	formData.value.ParentId = parentId;
	if (parentData != null) {
		parent.Component = parentData.Component;
		parent.Path = parentData.Path;
	}
	if (id == 0 && parentId == 0) {
		formData.value.Component = 'layout/routerView/parent';
	}
	Get('SysMenu/GetApiTag', {}).then((res: any) => {
		apiTagData.value = res.Data;
	});
	Get('SysMenu/GetPermissionType', {}).then((res: any) => {
		permissionData.value.Data = res.Data;
		permissionData.value.Value = ['Query'];
	});
	if (id > 0) {
		Get('SysMenu/GetSysMenuDetail', { Id: id }).then((res: any) => {
			formData.value = res.Data;
			let pers = res.Data.Permission.split(',');
			if (pers.length > 0) {
				pers.pop();
			}
			permissionData.value.Value = pers;
		});
	}

	dialogShow.value = true;
};

const onClose = () => {
	formRef.value.resetFields();
	formData.value.Component = '';
	permissionData.value.Data = [];
	permissionData.value.Value = [];
	dialogShow.value = false;
};
const onSubmit = () => {
	formData.value.Permission = permissionData.value.Value.toString() + ',';
	formRef.value.validate(async (valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Put('SysMenu/PutSysMenu', formData.value, (res: any) => {
					EMsg.success(res.Message);
					emit('refresh');
					onClose();
				});
			} else {
				Post('SysMenu/AddSysMenu', formData.value, (res: any) => {
					EMsg.success(res.Message);
					emit('refresh');
					onClose();
				});
			}
		}
	});
};
watch(formData.value, (newVal, oldVal) => {
	if (newVal.Type == 'Button') {
		newVal.Component = parent.Component;
		newVal.Path = parent.Path;
	}
	if (newVal.Type == 'Button') {
		newVal.Component = parent.Component;
		newVal.Path = parent.Path;
	} else if (newVal.IsLink) {
		newVal.IsIframe = false;
		newVal.Component = '/layout/routerView/link';
	} else if (newVal.IsIframe) {
		newVal.IsLink = false;
		newVal.Component = '/layout/routerView/iframes';
	}
});
const emit = defineEmits(['refresh']);
defineExpose({
	onShow,
});
</script>
